<template>
    <div>
        <h1>shallowRef() & triggerRef()</h1>

        <div class="group">
            <button type="button" @click="editshallowRef">修改shallowRef</button>
            <button type="button" @click="triggerRefHander">强制触发依赖于一个浅层的ref</button>
        </div>
        <div class="group">
            <p>slrefdataObj3.count : {{ slrefdataObj3.count }}</p>

        </div>
        <div class="group">
            <ul>
                <li v-for="item in slrefdataObj3.strArr" :key="item">{{ item }}</li>
            </ul>
        </div>
        <div class="group">
            <ul>
                <li v-for="(key, value) in slrefdataObj3.user" :key="value">{{ value }} : {{ key }}</li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo37'
}
</script>
<script setup lang='ts'>
import { shallowRef, triggerRef } from 'vue';

let dataObj3 = {
    count: 0,
    strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
    user: {
        name: '许家印',
        sex: 'nan',
        age: 42,
        aihao: {}
    }
}

// shallowRef() : 浅层的ref
// ref() 的浅层作用形式。
// 详细信息:
// 和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对.value 的访问是响应式的。
// shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。

let slrefdataObj3 = shallowRef(dataObj3)

const editshallowRef = () => {
    // 直接使用 .value 赋值是可以响应式改变的，但深层不行
    // slrefdataObj3.value = {
    //     count: 98456416,
    //     strArr: ['php', '刘强东asdad', '马云', '马化腾', '任正非'],
    //     user: {
    //         name: '许家印asd',
    //         sex: 'nan',
    //         age: 42,
    //         aihao: {}
    //     }
    // }

    slrefdataObj3.value.count++ // 会改变，但不会显示在页面上
    console.log(slrefdataObj3.value.count);

}


// triggerRef()
// 强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。

const triggerRefHander = () => {
    triggerRef(slrefdataObj3)
}


</script>

<style lang="scss" scoped>
.group {
    padding: 20px;
    border: 2px solid #abcdef;
    margin: 10px 0;
}

button {
    padding: 5px;
    margin: 5px;
}
</style>